<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>display-mode</title>
  <style>
    a {
      /* 转化为块级元素 */
      display: block;
      background-color: bisque;
      width: 100px;
      height: 50px;
    }

    .convert-1 {
      background-color: blueviolet;
      display: inline;
    }

    .convert-2 {
      background-color: coral;
      display: inline-block;
      width: 200px;
      height: 50px;
    }
  </style>
</head>

<body>
  <p>HTML 的元素根据显示模式分为<strong>块元素</strong>和<strong>行内（内联）元素</strong>两种</p>
  <hr>
  <h4>块元素，常见：div，p</h4>
  <ol>
    <li>独占一行</li>
    <li>可以设置宽高、内外边距</li>
    <li>宽度默认是容器（父级宽度）的100%</li>
    <li>自己本身也是容器，里面可以内嵌块级和行内元素</li>
  </ol>
  <h5>注意：文字类的块级元素内不能使用块级元素，比如p，h1~6等里面不能放其他块级元素！</h5>
  <hr>
  <h4>行内元素，常见：a，span</h4>
  <ol>
    <li>相邻行内元素在一行上可以显示多个</li>
    <li>高宽的直接设置是无效的</li>
    <li>默认宽度是它本身内容的宽度</li>
    <li>行内元素只能容纳文本或者其他的行内元素</li>
  </ol>
  <h5>注意：链接里面不能再放链接！特殊情况a里面可以放块级元素，但此时给a转换为块级模式最安全</h5>
  <hr>
  <h4>行内块元素，特殊：img，input，td，同时具有块元素和行内元素的特点</h4>
  <ol>
    <li>和相邻行内元素在一行上，但是彼此之间有间隙，一行可以显示多个</li>
    <li>默认宽度是本身内容的宽度</li>
    <li>可以控制宽高、内外边距！</li>
  </ol>
  <hr>
  <h4>元素显示模式转换，比如增加a的触发范围</h4>
  <h5>使用 display：block 转换为块级元素</h5>
  <h5>使用 display：inline 转换为行内元素</h5>
  <h5>使用 display：inline-block 转换为行内块元素</h5>
  <a href="#">click here!</a>
  <div class="convert-1">block element to inline element 1.</div>
  <div class="convert-1">block element to inline element 2.</div>
  <span class="convert-2">inline element to inline-block element</span>
  <span class="convert-2">inline element to inline-block element</span>
</body>

</html>